<template>
  <div>
    <div ref="editor" style="text-align:left"></div>
    <div ref="editor2" style="text-align:left"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import axios from '@/api'

export default {
  name: 'editor',
  data () {
    return {
      editorContent1: "",
      editorContent2: "<p>用 JS 设置的内容</p>"
    }
  },
  mounted() {
    let _this = this;
    let editor = new E(this.$refs.editor);
    // 自定义菜单配置
    editor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      // 'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      // 'emoticon',  // 表情
      'image',  // 插入图片
      'table',  // 表格
      'video',  // 插入视频
      // 'code',  // 插入代码
      // 'undo',  // 撤销
      // 'redo'  // 重复
    ];
    // 使用 base64 保存图片
    // editor.customConfig.uploadImgShowBase64 = true;
    // 限制一次最多能传几张图片
    editor.customConfig.uploadImgMaxLength = 1;
    // 自控图片上传
    editor.customConfig.customUploadImg = function (files, insert) {

      const formData = new FormData();
      formData.append('file', files[0]);
      _this.uploadImg(formData).then(res => {
        console.log(res)
        if (res.code === 200) {
          const imgUrl = res.data;
          insert(imgUrl);
        }
      })
    };
    editor.customConfig.onchange = (html) => {
      this.editorContent1 = html
    };
    editor.create();

    let editor2 = new E(this.$refs.editor2)
    editor2.customConfig.onchange = (html) => {
      this.editorContent2 = html
    };
    editor2.create();
    // 设置内容
    editor2.txt.html(this.editorContent2);
  },
  methods: {
    uploadImg (data) {
      return axios.request({
        url: '/upload',
        method: 'post',
        data
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
